{% extends "base1.html" %}
{% block body %}
{% include "navbar.html" %}
<section class="hero is-primary is-bold is-large">
  <div class="main_form">
    <div class="container">
      {% if responseData['OrderKeyId'] %}
      <div class="s-prose js-post-body" itemprop="text">
        <p>Payment OrderKeyId & Payment Process Url</p>
        <pre class="CodeBlock-pre  language-json">
			<code>
			<span><strong>OrderKeyId :</strong> {{responseData['OrderKeyId']}}</span>	
			<span><strong>Payment Process Url : </strong> {{responseData['PaymentProcessUrl']}}</span>
			</code>
			</pre>
      </div>
      <div class="col-md-4">
        <a target="_blank" href="/" class="btn btn-info btn-lg"
          style="display: block;color:#00d1b2;background-color:#FFF;">New Order Creation</a>
      </div>
      <div class="col-md-4">
        <a href="/orderdetail" class="btn btn-info btn-lg"
          style="display: block;color:#00d1b2;background-color:#FFF;">Check Order information</a>
      </div>
      
      <br>
      <br>      
      <br>
      <br>

      <div>
        <p><b>PayG Order Creation Request JSON</b></p>
        <pre style="background:#ffffff;color:#000000;padding:15px;border-radius:6px;overflow:auto;">{{ requestBody }}</pre>
      </div>

      <div>
        <p><b>PayG Order Creation Response JSON</b></p>
        <pre style="background:#ffffff;color:#000000;padding:15px;border-radius:6px;overflow:auto;">{{ responseData | tojson(indent=4) }}</pre>
      </div>

      {% else %}
      <div class="main_form">
        <div class="container">
          <div class="row">
            <form method="post" name="chatform" id="chatform">
              <div class="row">
                <div style="clear:both" class="col-md-12 col-sm-12">
                  <p> Order Details <span class="required">*</span> </p>
                  <div class="col-md-6 col-sm-6">
                    <div class="address"><input type="text" name="OrderAmount" placeholder="OrderAmount*" value="11"
                        required /> </div>
                  </div>
                  <div class="col-md-6 col-sm-6">
                    <div class="address"><input type="text" name="OrderType" value="PAYMENT" placeholder="OrderType">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div style="clear:both" class="col-md-12 col-sm-12">
                  <p> Order Amount data value equal to order amount </p>
                  <div class="col-md-6 col-sm-6">
                    <div class="address"><input type="text" name="AmountTypeDesc" value="Test"
                        placeholder="AmountTypeDesc"> </div>
                  </div>
                  <div class="col-md-6 col-sm-6">
                    <div class="address"><input type="text" name="Amount" value="11" placeholder="Amount"> </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div style="clear:both" class="col-md-12 col-sm-12">
                  <p> Customer Details </p>
                  <input type="hidden" name="CustomerId" value="152433">
                  <div class="col-md-12 col-sm-12">
                    <div class="order_date"><input class="customer" type="text" name="CustomerNotes"
                        value="New Test Order" placeholder="CustomerNotes"></div>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <div class="order_date"><input class="name" type="text" name="FirstName" value="Piyush"
                        placeholder="FirstName * " required></div>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <div class="order_date"><input class="name" type="text" name="LastName" value="Patel"
                        placeholder="LastName *" required></div>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <div class="order_date"><input class="name" type="text" name="MobileNo" value="8877678767"
                        placeholder="MobileNo * " required></div>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <div class="order_date"><input class="name" type="email" name="Email"
                        value="testmail123@paygmail.com" placeholder="Email *" required></div>
                  </div>
                  <div class="col-md-12 col-sm-12"><select name="EmailReceipt">
                      <option value="">EmailReceipt</option>
                      <option value="true" selected>True</option>
                      <option value="false">False</option>
                    </select>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="BillingAddress" value="Talwandi"
                        placeholder="BillingAddress"></div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="BillingCity" value="Kota" placeholder="BillingCity">
                    </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="BillingState" value="Rajsthan"
                        placeholder="BillingState"></div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="BillingCountry" value="India"
                        placeholder="BillingCountry"></div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="BillingZipCode" value="324005"
                        placeholder="BillingZipCode"></div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingFirstName" placeholder="ShippingFirstName">
                    </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingLastName" placeholder="ShippingLastName">
                    </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingAddress" placeholder="ShippingAddress"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingCity" placeholder="ShippingCity"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingState" placeholder="ShippingState"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingCountry" placeholder="ShippingCountry"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingZipCode" placeholder="ShippingZipCode"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="ShippingMobileNo" placeholder="ShippingMobileNo">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div style="clear:both" class="col-md-12 col-sm-12">
                  <p> Integration Data </p>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="UserName" placeholder="UserName"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="Source" placeholder="Source"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="IntegrationType" placeholder="IntegrationType"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="HashData" placeholder="HashData"> </div>
                  </div>
                  <div class="col-md-2 col-sm-6">
                    <div class="address"><input type="text" name="PlatformId" placeholder="PlatformId"></div>
                  </div>

                </div>
              </div>
              <div class="row">&nbsp;</div>
              <div style="clear:both;padding:0px;" class="col-md-12 col-sm-12">
                <div class="col-md-4">
                  <input class="btn btn-info btn-lg" type="submit" name="submit"
                    style="display: block;color:#00d1b2;background-color:#FFF;">
                </div>
                <div class="col-md-4">
                  <a href="/orderdetail" class="btn btn-info btn-lg"
                    style="display: block;color:#00d1b2;background-color:#FFF;">Check Order information</a>
                </div>

              </div>
              <div class="row">&nbsp;</div>
              <div class="row">&nbsp;</div>
            </form>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script>

  window.onload = function () {

    console.log("SCRIPT RUNNING");

    let orderKeyId = "{{ orderKeyId }}";

    console.log("OrderKeyId:", orderKeyId);

    if (orderKeyId && orderKeyId !== "None") {

      sessionStorage.setItem(
        "OrderKeyId",
        orderKeyId
      );

      console.log(
        "Saved:",
        sessionStorage.getItem("OrderKeyId")
      );
    }
  };

</script>
<script src="../static/js/scripts.js"></script>
<script type="text/javascript">
  function clearField() {
    if (document.getElementById) {
      document.chatform.reset();
    }
  }
</script>
{% endblock %}